<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>朋友圈</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--图标字体库css-->
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<!--SUI引用文件-->
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			.content-block,
			.tabs {
				margin: 0px;
				padding: 0px;
			}
			
			.clearfix:after {
				display: table;
				content: "";
				clear: both;
			}
			/* .content{
            text-align:left !important;
        } */
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.cnt {
				background: white;
				padding-bottom: 0.5rem;
				display: none;
			}
			
			.titlesr {
				padding-top: 1rem;
				padding-bottom: 1rem;
				width: 100%;
				margin-top: 0.15rem;
			}
			
			.pic img {
				margin-left: 2rem;
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
			}
			
			.wenzi {
				margin-left: 0.5rem;
			}
			
			.wenzi>div:first-child {
				margin-top: 0rem;
				color: black;
				font-size: 0.8rem;
			}
			
			.wenzi>div:last-child {
				margin-top: 0rem;
				color: #9c9c9c;
				font-size: 0.7rem;
			}
			
			.wenzi>div:last-child span {
				/* background:red; */
				/* margin-left:0.5rem; */
				margin-right: 0.5rem;
			}
			
			.coner {
				/* width: 100%; */
				clear: both;
				margin-left: 1rem;
				/* padding-right: 1rem; */
				line-height: 1rem;
				white-space: normal;
				/*sui自带文字部换行，改成文字换行*/
				color: black;
				font-size: 0.75rem;
				text-align: left;
				margin-top: -0.5rem;
			}
			
			.tubiao {
				margin-top: 0.6rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.tubiao div {
				margin-right: 2.5rem;
			}
			
			.tubiao div:nth-of-type(1) {
				margin-left: 3.5rem;
			}
			
			.tubiao .lanse {
				color: #4cc3ff;
			}
			
			.tubiao .huise {
				font-size: 0.7rem;
				color: #9c9c9c;
			}
			
			.moban {
				width: 100%;
				margin-top: 0.5rem;
				/*background:red;*/
			}
			
			.shurukuang {
				margin-left: 1%;
				width: 79%;
				height: 2rem;
				resize: none;
				border-color: #ccc;
			}
			
			.moban input {
				margin-left: 0.6rem;
				background: #C4E1FF;
				border: 0.05rem solid #F0F0F0;
				border-radius: 0.2rem;
				padding: 0.2rem 0.3rem;
				color: #6C6C6C;
			}
			
			.pt {
				width: 100%;
				height: 100%;
				display: none;
			}
			
			.pt .pic1 {
				width: 20%;
			}
			
			.pt .pic1 img {
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				vertical-align: middle;
			}
			
			.pt .name {
				color: blue;
				margin-left: 0.5rem;
			}
			
			.pt .neirong {
				/*background: #ccc;*/
				font-size: 0.6rem;
				padding-left: 0.2rem;
				padding-right: 0.2rem;
				width: 100%;
				word-break: break-all;
			}
			
			.pt .txt {
				/*background:red;*/
				width: 80%;
				text-align: left;
			}
			
			.jianju {
				margin-right: 0.3rem;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!-- 你的html代码 -->
				<nav class="bar bar-tab">
					<a class="tab-item external" href="首页.html">
						<span class="icon icon-home"></span>
						<span class="tab-label">首页</span>
					</a>
					<a class="tab-item external" href="1对1.html">
						<span class="icon icon-browser"></span>
						<span class="tab-label">1对1</span>
					</a>
					<a class="tab-item external" href="拍照搜题.html">
						<span class="icon icon-search"></span>
						<span class="tab-label">拍照</span>
					</a>
					<a class="tab-item active" href="#">
						<span class="icon icon-friends"></span>
						<span class="tab-label">朋友圈</span>
					</a>
					<a class="tab-item external" href="我的.html">
						<span class="icon icon-me"></span>
						<span class="tab-label">我</span>
					</a>
				</nav>
				<div class="content" style="text-align:center">
					<!-- 这里是页面内容区 -->

					<div class="buttons-tab">
						<a href="#tab1" class="tab-link active button">关注</a>
						<a href="#tab2" class="tab-link button">推荐</a>
						<a href="#tab3" class="tab-link button">视频</a>
					</div>
					<div class="content-block">
						<div class="tabs">
							<div id="tab1" class="tab active">
								<div class="content-block">
									<div class="cnt" id="cnt">
										<div class="titlesr clearfix">
											<div class="pic fl">
												<img src="" />
											</div>
											<div class="wenzi fl">
												<div>爱学习的鱼儿</div>
												<div><span>01-07</span><span>|</span><span>南京市</span></div>
											</div>
										</div>
										<div class="coner">
											"已知点A(-3,1,-4),则点A关于X轴的对称点坐标 为（）A.(-3,-1,4)B.(-3,-1,-4) c.(3,1,4)D.(3,-1,-4)"
										</div>
										<div class="tubiao clearfix">
											<div class="fl pinglun">
												<span class="icon-comment-alt lanse"></span>
												<span class="huise">192</span>
											</div>
											<div class="fl">
												<span class="fa fa-thumbs-o-up lanse"></span>
												<span class="huise">192</span>
											</div>
											<div class="fl">
												<span class="icon-external-link lanse"></span>
												<span class="huise">192</span>
											</div>
										</div>
										<div class="clearfix pt" id="pt">
											<div class="pic1 fl">
												<img src="imges/yanchijiazai.png" />
											</div>
											<div class="txt fl">
												<div class="name">zhangsan</div>
												<div class="neirong">家都发文件 </div>
											</div>
										</div>
										<div class="moban clearfix">
											<textarea class="shurukuang fl" placeholder="评论"></textarea>
											<input type="button" value="发送" class="fl" id="send" />
										</div>
									</div>
								</div>
							</div>
							<div id="tab2" class="tab">
								<div class="content-block">
									<p>This is tab 2 content</p>
								</div>
							</div>
							<div id="tab3" class="tab">
								<div class="content-block">
									<p>This is tab 3 content</p>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			jQuery.noConflict();
		</script>
		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script>
			$(start);

			function start() {
				$.getJSON("json/1.json", {}, function(date) {
					for(var key in date) {
						datas = date[key];
						console.log(datas);
						for(var i = 0; i < datas.length; i++) {
							var $newpro = $("#cnt").clone(true);
							$newpro.find(".pic img").attr("src", datas[i].touxiang);
							$newpro.find(".wenzi div:nth-of-type(1)").html(datas[i].name);
							$newpro.find(".wenzi div:nth-of-type(2) span:nth-of-type(1)").html(datas[i].data);
							$newpro.find(".wenzi div:nth-of-type(2) span:nth-of-type(3)").html(datas[i].city);
							$newpro.find(".coner").html(datas[i].text);
							$newpro.show();
							$(".content-block .tabs #tab1 .content-block").append($newpro);
							$newpro.find(".pinglun").click(
								function() {
									$(this).parent().next().next().find("textarea").focus()
								}
							)
							var textareah = $newpro.find(".moban textarea").height();
							var inputh = $newpro.find(".moban input").height();
							var cha = textareah / 2 - inputh / 2;
							$newpro.find(".moban input").css("margin-top", cha);
							//点赞
							$newpro.find(".tubiao>div:nth-of-type(2)").click(
								function() {
									$(this).find("span:nth-of-type(1)").remove();
									var yangshi = $("<span class='fa fa-thumbs-up lanse jianju'></span>");
									$(this).find("span").before(yangshi);
									var shuZi = parseInt($(this).find("span:last-child").text());
									shuZi++;
									$(this).find("span:last-child").text(shuZi);
								}
							)

						}
						//评论
						$(".cnt").find(".moban input").click(
							function() {
								$contenttext = $(this).parent().prev().clone();
								console.log($contenttext.html());
								var suijishu = Math.floor(Math.random() * 3) + 1;
								var names = ["张三", "李四", "王五"];
								$contenttext.find(".pic1 img").attr("src", "imges/head0" + suijishu + ".jpg");
								$contenttext.find(".neirong").text($(this).prev().val());
								$(this).prev().val("")
								$contenttext.find(".name").text(names[suijishu - 1]);
								$contenttext.show();
								$(this).prev().before($contenttext);
								$(this).prev().focus();
							}
						)
					}
					//						var $buttons = $(".buttons-tab").height(); //获取顶边状态栏的高度
					//						var st = document.body.scrollTop; //获得滚动条距离顶边的距离
					//						var ch = document.body.clientHeight; //获得屏幕可视高度

				})
			}
		</script>
	</body>

</html>